<template>
  <div class="manage_view">
    <div class="title">问卷列表</div>
    <a-table
      :dataSource="data"
      :columns="columns"
      :pagination="pagination"
      @change="paginationChange"
    >
      <template #action="{ record }">
        <a class="link_item" @click="handleRecovery(record.queId)">恢复</a>

        <a @click="handleDe(true, record.queId)">删除</a>
      </template>
    </a-table>
  </div>

  <a-modal v-model:visible="visible" centered @ok="handleDelete">
    <div class="text">删除后不可恢复，确认删除？</div>
  </a-modal>
</template>
<script lang="ts">
import { PaginationProps } from 'ant-design-vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
  components: {},
  props: {
    data: { type: Object, required: true },
    pagination: { type: Object, required: true },
  },
  emits: ['handleRecovery', 'handleDelete', 'paginationChange'],
  setup(props, { emit }) {
    const columns = [
      {
        title: '问卷名',
        dataIndex: 'queTitle',
        key: 'queTitle',
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
      },
      {
        title: '答卷数',
        dataIndex: 'answerCount',
        key: 'answerCount',
      },
      {
        title: '操作',
        key: 'action',
        slots: { customRender: 'action' },
      },
    ];

    const handleRecovery = (value: string) => {
      emit('handleRecovery', value);
    };

    const handleDelete = () => {
      emit('handleDelete', queId.value);

      visible.value = false;
    };

    const visible = ref<boolean>(false);

    const queId = ref<string>('');

    const handleDe = (value: boolean, _queId: string) => {
      visible.value = value;
      queId.value = _queId;
    };
    const paginationChange = (value: PaginationProps) => {
      emit('paginationChange', value);
    };
    return {
      paginationChange,
      columns,
      handleRecovery,
      handleDelete,
      visible,
      handleDe,
    };
  },
});
</script>
<style lang="less" scoped>
.manage_view {
  .title {
    line-height: 44px;
    color: #000000;
    font-size: 20px;
    font-weight: 600;
    padding-bottom: 12px;
  }
  .link_item {
    margin-right: 12px;
  }
}
.text {
  font-size: 20px;
  font-weight: bolder;
  padding: 36px 0 12px 12px;
}
</style>
